@import 'variables.scss';

.pkl-club-head {
    background: $deep-color;
    width: 100%;
    height: 10rem;
    display: -webkit-flex;
    -webkit-flex-direction: column;
    -webkit-justify-content: flex-end;
    text-align: left;
    padding: 2rem;
    color: #fff;

    .club-name {
        font-size: 2rem;
    }

    .club-join-time {
        font-size: 1.2rem;
    }
}


.tab-head {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-justify-content: space-between;
    height: 4rem;
    align-items: center;
    font-size: 1.4rem;
    border-bottom: $borderStyle;
    background: #fff;
    .tab-item {
        flex: 1;
        padding: .9rem;
        &:active {
            background: #d4d4d4;
            color: #e2e2e2;
        }
    }

    .active {
        border-bottom: 2px solid rgb(255, 106, 0);
    }
}

.pkl-club-line {
    display: -webkit-flex;
    height: 8rem;
    border-bottom: 1px solid #d4d4d4;
    -webkit-flex-direction: row;
    -webkit-align-items: center;
    background: #fff;
    padding: 2rem;

    .left {
        display: -webkit-flex;
        -webkit-flex-direction: column;
        -webkit-align-items: flex-start;
    }

    .right {
        padding-left: 2rem;
        text-align: right;
        .progress {
            width: 20rem;
            text-align: left;
            background: $deep-color;
            color: #fff;
            height: 2rem;
            display: -webkit-flex;
            -webkit-flex-direction: row;
            -webkit-align-items: center;
            padding: 0 1rem;
            position: relative;
            transform: skew(-25deg);

            .bar {
                position: absolute;
                height: 2rem;
                background: #da400a;
                left: 0;
                top: 0;
            }

            .text {
                z-index: 9;
            }
        }
    }
}

.pkl-chart-content {
    h1,h2 {
        font-weight: normal;
    }

    .charts {
        width: 100%;
        height: 20rem;
        background: #fff;
        border-bottom: 1px solid #d4d4d4;
    }
}

.pkl-club-title-line {
    display: -webkit-flex;
    // border-bottom: 1px solid #d4d4d4;
    -webkit-flex-direction: row;
    -webkit-align-items: center;
    background: #fff;
    padding: 1rem 2rem;
    border-left: 2px solid $deep-color;
}
